<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
    <h3 class="modal-title" *ngIf="mode === 'create' && isLdapMode">{{'GROUP.IMPORT_LDAP_GROUP' | translate}}</h3>
    <h3 class="modal-title" *ngIf="mode === 'create' && isHttpAuthMode">{{'GROUP.IMPORT_HTTP_GROUP' | translate}}</h3>
    <h3 class="modal-title" *ngIf="mode === 'create' && isOidcMode">{{'GROUP.IMPORT_OIDC_GROUP' | translate}}</h3>
    <h3 class="modal-title" *ngIf="mode !== 'create'">{{'GROUP.EDIT' | translate}}</h3>

    <div class="modal-body">
        <form class="clr-form clr-form-horizontal" #groupForm="ngForm">
            <section>
                <clr-input-container *ngIf="isLdapMode">
                    <label for="ldap_group_dn" class="required">{{ 'GROUP.GROUP_DN' | translate}}</label>
                    <input clrInput type="text" id="ldap_group_dn" name="ldap_group_dn" required
                        [disabled]="mode !== 'create'" [(ngModel)]="group.ldap_group_dn" #groupDN="ngModel" />
                    <clr-control-error>{{dnTooltip | translate}}</clr-control-error>
                </clr-input-container>
                <div class="clr-form-control" *ngIf="isLdapMode">
                    <label class="clr-control-label" for="type">{{'GROUP.TYPE' | translate}}</label>
                    <label class="padding-left-6" id="type">{{'GROUP.LDAP_TYPE' | translate}}</label>
                </div>
                <clr-input-container>
                    <label for="group_name" class="required">{{ 'GROUP.NAME' | translate}}</label>
                    <input clrInput type="text" id="group_name" name="group_name" required
                        [(ngModel)]="group.group_name" #groupName="ngModel" />
                    <clr-control-error>{{dnTooltip | translate}}</clr-control-error>
                </clr-input-container>
            </section>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline"
            (click)="close()">{{'BUTTON.CANCEL' | translate | translate}}</button>
        <button type="button" class="btn btn-primary" [disabled]="!isFormValid"
            (click)="save()">{{'BUTTON.SAVE' | translate | translate}}</button>
    </div>
</clr-modal>